<template>
    <div class="newsdetails-container">
        <h1 class="title">{{content.title}}</h1>
        <p class="subtitle">
            <span>发表时间：{{content.add_time | dateFormat()}}</span>
            <span>点击{{content.click}}次</span>
        </p>
        <div class="content" v-html="content.content">

        </div>

        <!-- 评论子组件 区域-->
        <!-- 通过属性绑定向子组件传值 -->
        <sun-comment v-bind:id="id"></sun-comment>

    </div>
</template>
<script>
// 引入评论子组件
import comment from "../subcomponent/Comment.vue"
    export default {
        data() {
            return {
                id: this.$route.params.id,
                content:{}
            }
        },
        components:{
            "sun-comment":comment
        },
        created() {
            this.getNewsDetails()
        },
        methods:{
            getNewsDetails() {
                this.$http.get('api/getnew/' + this.id).then(result => {
                   if(result.body.status === 0) {
                       this.content = result.body.message[0]
                       console.log(this.content)
                   }
                })
            }
        }
    }
</script>
<style lang="scss">
    .newsdetails-container {
        padding: 0 5px;
        .title {
            font-weight: normal;
            font-size: 14px;
            color: #f10;
            text-align: center;
            margin: 15px auto;
        }
        .subtitle {
            display: flex;
            justify-content: space-between;
            color: blue;
            font-size: 12px;
        }
        .content {
            img {
                width: 100%;
            }
        }
    }
</style>

